<template>
    <view class="info-box">
        <uv-navbar title="个人资料" placeholder bg-color="#fff" auto-back left-icon-color="#757575"
            title-style="color: #000000; font-size: 32rpx">
            <template #right>
                <uv-text text="保存" color="#4EA770" size="28rpx" @click="handleSubmit" />
            </template>
        </uv-navbar>

        <uv-form label-position="left" :model="forms" :rules="rules" ref="formRef" label-width="100">
            <view class="info-pop">
                <view class="info-row">
                    <uv-avatar :src="webSrc(forms.avatar)" size="64rpx" @click="onPreview" />
                    <uv-icon name="arrow-right" color="#757575" size="18" label="修改头像" label-pos="left"
                        label-size="28rpx" label-color="#323233" @click="onChangeAvatar" />
                </view>
            </view>
            <view class="info-pop">
                <uv-form-item label="姓名" borderBottom required prop="nickName">
                    <uv-input v-model="forms.nickName" border="none" maxlength="20" clearable input-align="right"
                        placeholder="请输入姓名" />
                </uv-form-item>
                <uv-form-item label="账号" borderBottom>
                    <template v-slot:right>
                        {{ forms.userName }}
                    </template>
                </uv-form-item>
                <uv-form-item label="部门" borderBottom>
                    <template v-slot:right>
                        {{ forms.dept?.deptName || '无' }}
                    </template>
                </uv-form-item>
                <uv-form-item label="职务">
                    <template v-slot:right>
                        {{ enumUserType(forms.userType) }}
                    </template>
                </uv-form-item>
            </view>
            <view class="info-pop">
                <uv-form-item label="性别" borderBottom required @click="showSex" prop="sex">
                    <uv-input v-model="forms.sexName" placeholder="请选择性别" disabled border="none" input-align="right"
                        disabled-color="#ffffff" suffix-icon="arrow-right" suffix-icon-style="color: #BDBDBD" />
                </uv-form-item>
                <uv-form-item label="生日" borderBottom required @click="showBirthday" prop="birthday">
                    <uv-input v-model="forms.birthday" placeholder="请选择生日" disabled border="none" input-align="right"
                        disabled-color="#ffffff" suffix-icon="arrow-right" suffix-icon-style="color: #BDBDBD" />
                </uv-form-item>
                <uv-form-item label="邮箱" borderBottom required prop="email">
                    <uv-input v-model="forms.email" border="none" maxlength="30" clearable input-align="right"
                        placeholder="请输入邮箱" />
                </uv-form-item>
                <uv-form-item label="手机" borderBottom required>
                    <template v-slot:right>
                        {{ forms.phonenumber }}
                    </template>
                </uv-form-item>
                <uv-form-item label="微信" prop="wechatNickName">
                    <template v-slot:right>
                        {{ forms.wechatNickName }}
                    </template>
                </uv-form-item>
            </view>
        </uv-form>
        <uv-picker ref="sexRef" :columns="sexList" round="20rpx" title="选择性别" confirm-color="#757575" key-name="label"
            @confirm="confirmSex" />
        <uv-calendars ref="birthdayRef" :date="forms.birthday" round="20rpx" color="#4EA770" :clear-date="false"
            confirm-color="#757575" close-on-click-overlay @confirm="confirmBirthday" />
    </view>
</template>
<script setup>
    import {
        reactive,
        ref,
        onMounted
    } from "vue";
    import {
        webSrc,
        enumUserType
    } from "@/common/mothed.js";
    import {
        commonUpload
    } from "@/request/common.js";
    import {
        getUser
    } from "@/request/login.js";
    import {
        putUser
    } from "@/request/user.js";

    const forms = ref({
        avatar: null, // 头像
        nickName: null, // 姓名
        userName: null, // 账号
        userDept: null, // 部门
        userType: null, // 职务
        sex: null, // 性别
        sexName: null, // 性别名称
        birthday: null, // 生日
        email: null, // 邮箱
        phonenumber: null, // 手机号
        wx: null, // 微信号
    }); // 用户信息
    const rules = reactive({
        nickName: [{
            required: true,
            message: "请输入姓名",
            trigger: ["blur", "change"]
        }],
        sex: [{
            required: true,
            message: "请选择性别",
            type: "string",
            trigger: ["blur", "change"],
        }, ],
        birthday: [{
            required: true,
            message: "请选择生日",
            trigger: ["blur", "change"]
        }],
        email: [{
            required: true,
            message: "请输入邮箱",
            trigger: ["blur", "change"]
        }],
    });
    const formRef = ref(); // 表单ref
    const birthdayRef = ref(); // 生日弹窗ref
    const sexRef = ref(); // 性别弹窗ref
    const sexList = ref([
        // 性别列表
        [{
                value: "1",
                label: "男"
            },
            {
                value: "2",
                label: "女"
            },
            {
                value: "3",
                label: "未知"
            },
        ],
    ]);

    onMounted(() => {
        getUserInfo();
    });

    // 获取用户信息
    const getUserInfo = async () => {
        let info = uni.getStorageSync("userInfo");
        if (info) forms.value = info;
        getUser().then((res) => {
            if (res.code == 200) {
                const {
                    sex
                } = res.user;
                forms.value = res.user;
                forms.value.sexName =
                    sex == "1" ? "男" : sex == "2" ? "女" : sex == "3" ? "未知" : "";
                uni.setStorageSync("userInfo", res.user);
            }
        });
    };

    // 修改个人资料
    const handleSubmit = () => {
        formRef.value
            .validate()
            .then((valid) => {
                if (valid) {
                    let data = Object.assign({}, forms.value);
                    delete data.sexName;
                    putUser(data).then((res) => {
                        if (res.code == 200) {
                            uni.setStorageSync("userInfo", data);
                            uni.showToast({
                                title: "修改成功",
                                icon: "success",
                            });

                            setTimeout(() => {
                                uni.navigateBack({
                                    delta: 1
                                })
                            }, 500)
                        }
                    });
                }
            })
            .catch(() => {});
    };

    // 上传头像
    const onChangeAvatar = () => {
        uni.chooseImage({
            count: 1,
            crop: {
                width: 800,
                height: 800,
                resize: true,
            },
            success: (image) => {
                commonUpload(
                    image.tempFilePaths[0],
                    "/system/user/profile/avatar",
                    "avatarfile"
                ).then((res) => {
                    if (res.code == 200) {
                        forms.value.avatar = res.imgUrl;
                    }
                });
            },
            fail: () => {
                uni.showToast({
                    title: "获取权限失败",
                    icon: "none",
                })
            }
        });
    };

    // 预览头像
    const onPreview = () => {
        if (!forms.value.avatar) return;
        uni.previewImage({
            urls: [webSrc(forms.value.avatar)],
        });
    };

    // 显示性别弹窗
    const showSex = () => {
        sexRef.value.open();
    };

    // 选择性别
    const confirmSex = (e) => {
        forms.value.sex = e.value[0]?.value;
        forms.value.sexName = e.value[0]?.label;
    };

    // 显示生日弹窗
    const showBirthday = () => {
        birthdayRef.value.open();
    };

    // 选择生日
    const confirmBirthday = (e) => {
        forms.value.birthday = e.fulldate;
    };
</script>
<style lang="scss" scoped>
    .info-box {
        min-height: 100vh;
        background-color: #f9f9f9;
        padding: 40rpx;
        box-sizing: border-box;

        .info-pop {
            border-radius: 20rpx;
            background: #ffffff;
            box-shadow: 0 6px 20rpx 2rpx rgba(33, 33, 33, 0.16);
            margin-bottom: 30rpx;
            padding: 20rpx 40rpx;
            box-sizing: border-box;

            .info-row {
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 2rpx solid #f2f2f2;

                &:last-child {
                    border-bottom: none;
                }
            }
        }
    }
</style>